<template>
    <div class="order_infos" v-loading.fullscreen.lock="fullscreenLoading">
        <div class="outers" v-if="$route.query.type==1">当前位置：<span @click="$router.push({name: 'home'})">首页</span>><span
            @click="$router.push({name: 'cart'})">购物车</span>>确认订单
        </div>
        <div class="outers" v-else>当前位置：<span @click="$router.push({name: 'home'})">首页</span>><span @click="$router.push({name: 'quotation'})">报价单</span>>确认订单
        </div>
        <div class="content_box_infos_tabcar_hove" v-if="userType==2 && userInfo && userInfo.is_inside && userInfo.is_inside==1 ">
            <div class="tab_infos_input">
                <div class="titles">帮人下单</div>
                <input v-model="phone" placeholder="请输入手机号"/>
                <div @click="SearchUser" class="btns">确认</div>
            </div>
            <!-- <div class="Tab_cars" v-if="outhUserInfo.id">
                <div class="top">
                    <div style="margin-right: 36px">姓名：{{ outhUserInfo.name }}</div>
                    <div>手机号：{{ outhUserInfo.phone }}</div>
                </div>
                <div class="bottomes">单位名称：{{ outhUserInfo.company }}</div>
            </div> -->
            <div class="Tab_cars" v-for="(item,index) in seachUsers" :key="index" @click="chooseUser(item)" style="margin-top: 5px;cursor: pointer;">
                <div class="top">
                    <div style="margin-right: 36px">姓名：{{ item.name }}</div>
                    <div>手机号：{{ item.phone }}</div>
                </div>
                <div class="bottomes">单位名称：{{ item.company }}</div>
            </div>
        </div>
        <div class="title_infos">收货信息</div>
        <div class="address_list">
            <div class="addreess_list_info" @click="changAddress(item.id)" :class="{'active_address':item.id == address_id}"
                 v-for="(item,index) in addressList" :key="index">
                <div class="titles">
                    <span>{{ item.name }}</span>
                    <span v-if="item.is_default">默认</span>
                </div>
                <div>{{ item.phone }} / {{ item.landline }}</div>
                <div>{{ item.pro_name }}{{ item.city_name }}{{ item.address }}</div>
                <div class="porter">
                    <span @click.stop="editShow(item)">编辑</span>
                    <span @click="DeleteAddress(item.id)">删除</span>
                </div>
            </div>
            <div class="addreess_list_info" style="display: flex;align-items: center;justify-content: center">
                <div class="" @click="appendAddress" style="text-align: center">
                    <img src="../assets/add-address.png" style="width: 18px;height: 18px;margin-bottom: 10px">
                    <div style="margin: 0">添加收货地址</div>
                </div>
            </div>
        </div>
        <div class="title_infos">商品信息</div>
        <div class="goods_list">
            <div class="head_top">
                <div class="goods_box"><span>商品</span></div>
                <div class="goods_price">单价</div>
                <div class="goods_price">数量</div>
                <div class="goods_price">小计</div>
            </div>
            <div class="car_list_infos" v-for="(item,index) in goodsInfo.goods" :key="index">
                <div class="head_top body_top">
                    <div class="goods_box head_infos">
                        <img :src="item.goods_image"/>
                        <div class="jsons">{{ item.goods_name }}</div>
                    </div>
                    <div class="goods_price">￥{{ item.goods_price }}</div>
                    <div class="goods_price">{{ item.num }}</div>
                    <div class="goods_price">￥{{ item.all_price }}</div>
                </div>
                <div style="font-size: 12px;margin-left: 92px;margin-top:24px">型号：{{ item.goods_model }}</div>
            </div>
        </div>
        <div class="title_infos">发票信息</div>
        <div class="invoice_box">
            <div class="box_names" v-if="invoiceInfo.id">
                <div class="box_items_inof">
                    <div class="title">{{ invoiceInfo.type == 1 ? '发票抬头：' : '单位名称：' }}</div>
                    <div class="contents">{{ invoiceInfo.title }}</div>
                </div>
                <div class="box_items_inof" v-if="invoiceInfo.type!=1">
                    <div class="title">税号：</div>
                    <div class="contents">{{ invoiceInfo.code }}</div>
                </div>
                <div class="box_items_inof" v-if="invoiceInfo.type!=1">
                    <div class="title">注册地址：</div>
                    <div class="contents">{{ invoiceInfo.register_address }}</div>
                </div>
                <div class="box_items_inof" v-if="invoiceInfo.type!=1">
                    <div class="title">开户银行：</div>
                    <div class="contents">{{ invoiceInfo.bank_name }}</div>
                </div>
                <div class="box_items_inof" v-if="invoiceInfo.type!=1">
                    <div class="title">银行账号：</div>
                    <div class="contents">{{ invoiceInfo.bank_code }}</div>
                </div>
                <div class="box_items_inof" v-if="invoiceInfo.type!=1">
                    <div class="title">注册电话：</div>
                    <div class="contents">{{ invoiceInfo.register_tel }}</div>
                </div>
                <div class="box_items_inof" v-if="invoiceInfo.type==1 || invoiceInfo.type==4">
                    <div class="title">邮箱：</div>
                    <div class="contents">{{ invoiceInfo.email }}</div>
                </div>
                <div class="box_items_inof" style="margin-bottom: 0">
                    <div class="title">收票地址：</div>
                    <div class="contents">{{ invoiceInfo.address }}</div>
                </div>
            </div>
            <div class="choice" @click="openInvoice"> {{ invoiceInfo.id ? '重新选择发票抬头' : '选择发票抬头' }}</div>
        </div>
        <div class="mark">备注<span>（200字以内）</span></div>
        <textarea v-model="remarks" placeholder="如果有其他需求还请留言说明" class="mark_info"></textarea>
        <div class="tips_info">如果有其他需求还请留言说明</div>
        <div class="operation_box">
            <div class="box_outhers">
                <template v-if="goodsInfo.dis">
                    <div class="all_prices">
                        <span>总金额：</span>
                        <span style="color: #535353; text-decoration: line-through;">￥{{goodsInfo.old_price}}</span>
                    </div>
                    <div class="all_prices">
                        <span>折扣率：</span>
                        <span>{{goodsInfo.dis}}%</span>
                    </div>
                </template>
                <div class="all_prices">
                    <span v-if="goodsInfo.dis">折扣总金额：</span>
                    <span v-else>总金额：</span>
                    <span>￥{{goodsInfo.all_price}}</span>
                </div>
                <div class="btns" @click="userMakeOrder">提交订单</div>
                <div class="cars" @click="$router.push({name: 'cart'})">返回购物车></div>
            </div>
        </div>
        <transition name="slide-fade">
            <div class="city_location_box_infos" v-if="invoiceInfoShow">
                <div class="location_box">
                    <img @click="invoiceInfoShow=false" class="colses" src="../assets/window-icon-close-black.png">
                    <div class="login_icons">
                        <div class="tab_infos_changs">
                            <div class="case_tab_name" :class="{'active_tab':type==1}" @click="chang_tabs(1)">个人</div>
                            <div class="lines"></div>
                            <div class="case_tab_name" :class="{'active_tab':type===2}" @click="chang_tabs(2)">企业（普票）</div>
                            <div class="lines"></div>
                            <div class="case_tab_name" :class="{'active_tab':type==3}" @click="chang_tabs(3)">企业（专票）</div>
                            <div class="lines"></div>
                            <div class="case_tab_name" :class="{'active_tab':type==4}" @click="chang_tabs(4)">企业（电子普票）</div>
                        </div>
                        <div class="invoice_list_info_tab">
                            <template v-if="invoiceList.length">
                                <div class="box_names" :class="{'active_infos_tame':item.id==activeId}" @click="changInvoiceItem(item)"
                                     v-for="(item,index) in invoiceList" :key="index">
                                    <div class="box_items_inof">
                                        <div class="title">{{ item.type == 1 ? '发票抬头：' : '单位名称：' }}</div>
                                        <div class="contents">{{ item.title }}</div>
                                    </div>
                                    <template v-if="item.type!=1">
                                        <div class="box_items_inof">
                                            <div class="title">税号：</div>
                                            <div class="contents">{{ item.code }}</div>
                                        </div>
                                        <div class="box_items_inof">
                                            <div class="title">注册地址：</div>
                                            <div class="contents">{{ item.register_address }}</div>
                                        </div>
                                        <div class="box_items_inof">
                                            <div class="title">开户银行：</div>
                                            <div class="contents">{{ item.bank_name }}</div>
                                        </div>
                                        <div class="box_items_inof">
                                            <div class="title">银行账号：</div>
                                            <div class="contents">{{ item.bank_code }}</div>
                                        </div>
                                        <div class="box_items_inof">
                                            <div class="title">注册电话：</div>
                                            <div class="contents">{{ item.register_tel }}</div>
                                        </div>
                                    </template>
                                    <div class="box_items_inof" v-if="item.type==1 || item.type==4">
                                        <div class="title">邮箱：</div>
                                        <div class="contents">{{ item.email }}</div>
                                    </div>
                                    <div class="box_items_inof" style="margin-bottom: 0">
                                        <div class="title">收票地址：</div>
                                        <div class="contents">{{ item.address }}</div>
                                    </div>
                                </div>
                                <div @click="invoiceInfoFromShow=true" class="addreess_list_info" :class="{'invoce_type':type!=1}"
                                     style="display: flex;align-items: center;justify-content: center">
                                    <div class="" style="text-align: center">
                                        <img src="../assets/add_address_h.png" style="width: 18px;height: 18px;margin-bottom: 10px">
                                        <div style="margin: 0">添加发票抬头</div>
                                    </div>
                                </div>
                            </template>
                            <template v-else>
                                <div style="margin:120px auto 0">
                                    <div style="font-size: 14px;margin-bottom:21px">暂无发票抬头信息</div>
                                    <div @click="invoiceInfoFromShow=true"
                                         style="width: 84px;height: 30px;background: #B11E24;line-height: 30px;font-size:14px;color: #FFFFFF ;margin: 0 auto">
                                        去添加
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                    <div class="invoice-options">
                        <button class="invoice-confirm" @click="confirmInvoice">确 认</button>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="slide-fade">
            <div class="city_location_box" v-if="invoiceInfoFromShow">
                <div class="location_box">
                    <div class="tips_title">添加发票抬头</div>
                    <div class="line"></div>
                    <img @click="invoiceInfoFromShow=false" src="../assets/window-icon-close-black.png" class="close">
                    <div class="content_box_infos_tabcar">
                        <div class="tab_infos_input">
                            <div class="titles">{{ type == 1 ? '发票抬头：' : '单位名称：' }}</div>
                            <input v-model="parmaData.title" :placeholder="type == 1 ? '请输入发票抬头：' : '请输入单位名称：'"/>
                        </div>
                        <template v-if="type != 1">
                            <div class="tab_infos_input">
                                <div class="titles">税号：</div>
                                <input v-model="parmaData.code" placeholder="请输入纳税人识别号"/>
                            </div>
                            <div class="tab_infos_input">
                                <div class="titles">注册地址：</div>
                                <input v-model="parmaData.register_address" placeholder="请输入注册地址"/>
                            </div>
                            <div class="tab_infos_input">
                                <div class="titles">开户银行：</div>
                                <input v-model="parmaData.bank_name" placeholder="请输入开户银行"/>
                            </div>
                            <div class="tab_infos_input">
                                <div class="titles">银行账号：</div>
                                <input v-model="parmaData.bank_code" placeholder="请输入银行账号"/>
                            </div>
                            <div class="tab_infos_input">
                                <div class="titles">注册电话：</div>
                                <input v-model="parmaData.register_tel" placeholder="请输入注册电话"/>
                            </div>
                        </template>
                        <div class="tab_infos_input" v-if="type == 1 || type == 4">
                            <div class="titles">邮箱：</div>
                            <input v-model="parmaData.email" placeholder="请输入邮箱"/>
                        </div>
                        <div class="tab_infos_input" style="align-items: flex-start">
                            <div class="titles">收票地址：</div>
                            <textarea v-model="parmaData.address" placeholder="请输入收票详细地址，收票人姓名及联系电话"/>
                        </div>
                    </div>
                    <div class="tips_btn">
                        <div @click="invoiceInfoFromShow=false">取消</div>
                        <div @click="userSaveInvoice">确认</div>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="slide-fade">
            <div class="city_location_box" v-if="addressInfoShow">
                <div class="location_box">
                    <div class="tips_title">{{ addressInfo.id ? '编辑' : '添加' }}收货地址</div>
                    <div class="line"></div>
                    <img @click="addressInfoShow=false" src="../assets/window-icon-close-black.png" class="close">
                    <div class="content_box_infos_tabcar address_tabs">
                        <div class="tab_infos_input">
                            <div class="titles">收货人姓名：</div>
                            <input v-model="addressInfo.name" placeholder="请输入用户名"/>
                        </div>
                        <div class="tab_infos_input">
                            <div class="titles">收货地区：</div>
                            <div style="display: flex;justify-content: space-between;width: 220px">
                                <el-select v-model="pro_id" placeholder="请选择">
                                    <el-option
                                        v-for="item in provinceList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                                <el-select v-model="addressInfo.city_id" placeholder="请选择">
                                    <el-option
                                        v-for="item in cityList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="tab_infos_input" style="align-items: flex-start">
                            <div class="titles">详细地址：</div>
                            <textarea v-model="addressInfo.address" placeholder="请输入详细地址"/>
                        </div>
                        <div class="tab_infos_input">
                            <div class="titles">联系手机：</div>
                            <input v-model="addressInfo.phone" placeholder="请输入"/>
                        </div>
                        <div class="tab_infos_input">
                            <div class="titles">联系座机：</div>
                            <input v-model="addressInfo.landline" placeholder="请输入"/>
                        </div>
                    </div>
                    <div class="tips_btn">
                        <div @click="addressInfoShow=false">取消</div>
                        <div @click="userSavedAdress">确认</div>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="slide-fade">
            <div class="city_location_box_infos" v-if="checkoutSuccess">
                <div class="location_checkout_box">
                    <div class="login_icons">
                        <img src="../assets/registered-successfully-green@2x.png">
                        <div>下单成功</div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
    import {
        deleteAddress,
        getAddressList,
        getCartGoodsInfo,
        getCity,
        getInvoiceList,
        getProvince,
        getQuotationGoods,
        makeOrder,
        saveAddress,
        saveInvoice,
        searchUser
    } from "@/api/apis";
    import {mapState} from "vuex";

    export default {
        name: "confrimOrder",
        data() {
            return {
                goodsInfo: {},
                orderType: 1,
                car_id: [],
                addressList: [],
                address_id: '',
                type: 1,
                userType: 1,
                //分类的发票
                invoiceList: [],
                invoiceInfo: {},
                remarks: '',
                invoiceInfoShow: false,
                invoiceInfoFromShow: false,
                parmaData: {
                    type: '',
                    title: '',
                    code: '',
                    register_address: '',
                    bank_name: '',
                    bank_code: '',
                    register_tel: '',
                    address: '',
                    email: ''
                },
                activeId: '',
                activeInvoice: {},
                addressInfoShow: false,
                addressInfo: {
                    city_id: '',
                    name: '',
                    address: '',
                    phone: '',
                    landline: '',
                    id: '',
                    pro_id: ''
                },
                provinceList: [],
                cityList: [],
                pro_id: '',
                fullscreenLoading: false,
                outhUserInfo: {},
                phone: '',
                checkoutSuccess: false,
                seachUsers:''
            }
        },
        computed: {
            ...mapState(["userInfo"])
        },
        watch: {
            pro_id(val) {
                this.addressInfo.city_id = ''
                if (val) {
                    this.getCity(val)
                }
            }
        },
        mounted() {
            if (this.$route.query.type) {
                this.orderType = this.$route.query.type
                this.userType = this.$route.query.user_type
            }
            if (this.$route.query.type == 1) {
                this.car_id = JSON.parse(this.$route.query.car_id_list)
                this.GetCartGoodsInfo()
            } else {
                this.car_id = this.$route.query.car_id_list
                this.GetQuotationGoods()
            }
            if (this.userType != 2) {
                this.GetAddressList()
                this.GetTypeInvoiceList()
            }
            this.GetProvince()
        },
        methods: {
            userMakeOrder() {
                if (this.userType == 2) {
                    if (this.outhUserInfo.id) {
                        this.suuerOrder()
                    } else {
                        this.$message.warning('请选择你需要帮助下单的人');
                    }
                } else {
                    this.suuerOrder()
                }
            },
            suuerOrder() {
                let data = {
                    address_id: this.address_id,
                    invoice_id: this.activeId,
                    remarks: this.remarks,
                    ids: this.car_id,
                    user_id: this.outhUserInfo.id,
                    type: this.orderType,
                }
                makeOrder(data).then(res => {
                    this.checkoutSuccess = true;
                    this.$store.commit('changeCartNumber');
                    setTimeout(() => {
                        this.checkoutSuccess = false
                        this.$router.replace({name: 'orderList'});
                    }, 500)
                })
            },
            chooseUser(item){
                this.outhUserInfo = item;
                this.GetAddressList()
                this.GetTypeInvoiceList()
            },
            SearchUser() {
                let data = {phone: this.phone}
                searchUser(data).then(res => {
                    //this.outhUserInfo = res.data;
                    this.seachUsers = res.data;
                    //this.GetAddressList()
                    //this.GetTypeInvoiceList()
                });
            },

            GetCartGoodsInfo() {
                let data = {ids: this.car_id}
                getCartGoodsInfo(data).then(res => {
                    this.goodsInfo = res.data
                })
            },

            GetQuotationGoods() {
                let data = {id: this.car_id}
                getQuotationGoods(data).then(res => {
                    this.goodsInfo = res.data
                })
            },

            // 获取收货地址列表
            GetAddressList() {
                var data = {uid: 0};
                if (this.userType == 2) {
                    if (this.outhUserInfo.id) {
                        data.uid = this.outhUserInfo.id;
                    } else {
                        this.$message.warning('请选择你需要帮助下单的人');
                        return;
                    }
                }
                getAddressList(data).then(res => {
                    if (res.data.length) {
                        res.data.map(item => {
                            if (item.is_default) {
                                this.address_id = item.id
                            }
                        })
                    }
                    this.addressList = res.data
                })
            },

            changAddress(id) {
                this.address_id = id
            },

            userSavedAdress() {
                this.addressInfo.pro_id = this.pro_id;
                let data = this.addressInfo;
                if(this.userType == 2){
                    if (this.outhUserInfo.id) {
                        data.user_id = this.outhUserInfo.id;
                    } else {
                        this.$message.warning('请选择你需要帮助下单的人');
                        return;
                    }
                }
                saveAddress(data).then(res => {
                    this.$message.success('操作成功')
                    this.addressInfoShow = false
                    this.GetAddressList()
                    this.pro_id = ''
                    this.addressInfo = {
                        city_id: '',
                        name: '',
                        address: '',
                        phone: '',
                        landline: '',
                        id: '',
                        pro_id: ''
                    }
                })
            },

            // 获取地区
            GetProvince() {
                getProvince().then(res => {
                    this.provinceList = res.data
                })
            },

            editShow(item) {
                this.fullscreenLoading = true
                this.pro_id = item.pro_id
                setTimeout(() => {
                    this.addressInfo = item
                    this.addressInfoShow = true
                    this.fullscreenLoading = false
                }, 500)
            },
            appendAddress() {
                if (this.userType == 2) {
                    if (this.outhUserInfo.id) {
                        this.addressInfoShow = true;
                    } else {
                        this.$message.warning("请先选择被帮助人员");
                    }
                } else {
                    this.addressInfoShow = true;
                }
            },
            DeleteAddress(e) {
                let data = {id: e}
                this.$confirm('此操作将永久删除该地址, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteAddress(data).then(res => {
                        this.$message.success('操作成功')
                        this.GetAddressList()
                    })
                }).catch(() => {

                });
            },

            getCity(id) {
                let data = {pro_id: id}
                getCity(data).then(res => {
                    this.cityList = res.data
                })
            },
            openInvoice() {
                if (this.userType == 2) {
                    if (this.outhUserInfo.id) {
                        this.invoiceInfoShow = true;
                    } else {
                        this.$message.warning("请先选择被帮助人员");
                    }
                } else {
                    this.invoiceInfoShow = true;
                }
            },
            //发票
            GetTypeInvoiceList() {
                let data = {type: this.type, uid: 0}
                if (this.userType == 2) {
                    if (this.outhUserInfo.id) {
                        data.uid = this.outhUserInfo.id;
                    } else {
                        this.$message.warning('请选择你需要帮助下单的人');
                        return;
                    }
                }
                getInvoiceList(data).then(res => {
                    this.invoiceList = res.data
                })
            },
            chang_tabs(e) {
                this.type = e
                this.GetTypeInvoiceList()
            },
            userSaveInvoice() {
                this.parmaData.type = this.type
                let data = this.parmaData
                if(this.userType == 2){
                    if (this.outhUserInfo.id) {
                        data.user_id = this.outhUserInfo.id;
                    } else {
                        this.$message.warning('请选择你需要帮助下单的人');
                        return;
                    }
                }
                saveInvoice(data).then(res => {
                    this.$message.success('添加成功')
                    this.invoiceInfoFromShow = false
                    this.GetTypeInvoiceList()
                    this.parmaData = {
                        type: '',
                        title: '',
                        code: '',
                        register_address: '',
                        bank_name: '',
                        bank_code: '',
                        register_tel: '',
                        address: '',
                        email: ''
                    }
                })
            },
            changInvoiceItem(e) {
                this.activeInvoice = e;
                this.activeId = e.id;
            },
            confirmInvoice() {
                if (this.activeInvoice.id) {
                    this.invoiceInfo = this.activeInvoice;
                    this.invoiceInfoShow = false;
                } else {
                    this.$message.warning("请选择发票");
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .order_infos {
        padding: 22px 0 77px;
        min-width: calc(100vh - 99px);
        width: 1200px;
        margin: 0 auto;
        
        .outers {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            margin-bottom: 31px;
        }
        
        .title_infos {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #000000;
            padding-bottom: 19px;
            border-bottom: 1px solid #000000;
        }
        
        .address_list {
            margin: 30px auto 40px;
            cursor: pointer;
            display: flex;
            flex-wrap: wrap;
            
            .addreess_list_info {
                padding: 20px;
                margin-bottom: 27px;
                margin-right: 27px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
                width: 260px;
                background: #FFFFFF;
                border: 1px solid #C7C7C7;
                box-sizing: border-box;
                
                div:nth-child(2) {
                    margin: 23px 0 17px;
                }
                
                .titles {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    
                    span:nth-child(2) {
                        color: #B11E24;
                    }
                }
                
                .porter {
                    margin-top: 19px;
                    display: flex;
                    justify-content: flex-end;
                    color: #B11E24;
                    
                    span:nth-child(1) {
                        color: #0670DB;
                        margin-right: 20px;
                    }
                }
            }
            
            .active_address {
                border-color: #B11E24;
            }
            
            .addreess_list_info:nth-child(4n) {
                margin-right: 0;
            }
        }
        
        .goods_list {
            margin: 20px 0 39px;
            
            .head_top {
                height: 36px;
                background: #E9E9E9;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #000000;
                
                .goods_box {
                    width: 500px;
                    
                    span {
                        margin-left: 37px;
                    }
                }
                
                .goods_price {
                    width: 200px;
                    text-align: center;
                }
            }
            
            .car_list_infos {
                margin-top: 33px;
                height: auto;
                background: #FFFFFF;
                
                .body_top {
                    height: auto;
                    background: #FFFFFF;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                    
                    .head_infos {
                        display: flex;
                        
                        img {
                            width: 62px;
                            height: 62px;
                            object-fit: cover;
                            margin-right: 10px;
                            margin-left: 20px;
                        }
                        
                        .jsons {
                            width: 380px;
                            line-height: 20px;
                            font-size: 12px;
                            white-space: pre-wrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 3;
                            -webkit-box-orient: vertical;
                        }
                    }
                }
            }
            
        }
        
        .invoice_box {
            margin: 30px 0;
            display: flex;
            cursor: pointer;
            
            .choice {
                width: 280px;
                height: 95px;
                background: #FFFFFF;
                border: 1px dashed #B11E24;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 95px;
                text-align: center;
                color: #B11E24;
                margin-left: 27px;
            }
            
            
        }
        
        .mark {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            
            span {
                font-size: 12px;
                color: #B11E24;
            }
        }
        
        .mark_info {
            padding: 10px;
            width: 100%;
            height: 107px;
            background: #FFFFFF;
            border: 1px solid #C7C7C7;
            margin: 20px 0 30px;
            outline: none;
            resize: none;
        }
        
        .tips_info {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #C7C7C7;
            padding-bottom: 19px;
            border-bottom: 1px solid #000000;
        }
        
        .operation_box {
            display: flex;
            justify-content: flex-end;
            margin-top: 35px;
            cursor: pointer;
            
            .box_outhers {
                width: 210px;
                
                .all_prices {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                }
                
                .btns {
                    height: 36px;
                    background: #B11E24;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 36px;
                    color: #FFFFFF;
                    text-align: center;
                    margin: 27px 0 20px;
                }
                
                .cars {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #B11E24;
                }
            }
        }
        
        .city_location_box_infos {
            position: fixed;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.21);
            left: 0;
            bottom: 0;
            z-index: 5;
            
            .location_box {
                width: 1200px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                border: 1px solid #9D9D9D;
                z-index: 6;
                background: #FFFFFF;
                
                .colses {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    width: 18px;
                    height: 18px;
                }
                
                .login_icons {
                    text-align: center;
                    cursor: pointer;
                    margin: 60px 0 0 160px;
                    height: 530px;
                    width: 945px;
                    overflow-y: scroll;
                    
                    .tab_infos_changs {
                        display: flex;
                        align-items: center;
                        margin-bottom: 28px;
                        
                        .case_tab_name {
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #000000;
                        }
                        
                        .lines {
                            width: 0px;
                            height: 16px;
                            border-right: 1px solid #000000;
                            margin: 0 20px;
                        }
                        
                        .active_tab {
                            color: #B11E24;
                        }
                    }
                    
                    .invoice_list_info_tab {
                        display: flex;
                        flex-wrap: wrap;
                        
                        .box_names {
                            margin: 0 20px 20px 0;
                        }
                        
                        .addreess_list_info {
                            width: 280px;
                            min-height: 140px;
                            margin-right: 20px;
                            margin-bottom: 20px;
                            background: #FFFFFF;
                            border: 1px dashed #B11E24;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #B11E24;
                        }
                        
                        .invoce_type {
                            min-height: 250px;
                        }
                    }
                    
                    .active_infos_tame {
                        border-color: #B11E24;
                    }
                }
                
                .login_icons::-webkit-scrollbar { /*滚动条整体样式*/
                    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
                    height: 1px;
                }
                
                .login_icons::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
                    border-radius: 10px;
                    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    background: #B11E24;
                }
                
                .login_icons::-webkit-scrollbar-track { /*滚动条里面轨道*/
                    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    border-radius: 10px;
                    background: #EDEDED;
                }
            }
            
            .invoice-options {
                text-align: right;
                padding: 60px 100px 60px 60px;
                
                .invoice-confirm {
                    background-color: #B11E24;
                    border: 0;
                    color: #FFFFFF;
                    font-size: 14px;
                    height: 36px;
                    line-height: 36px;
                    padding: 0 30px;
                    cursor: pointer;
                }
            }
            
            .location_checkout_box {
                width: 480px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                border: 1px solid #9D9D9D;
                z-index: 6;
                background: #FFFFFF;
                height: 331px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8px;
                
                .colses {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    width: 18px;
                    height: 18px;
                }
                
                .login_icons {
                    text-align: center;
                    
                    img {
                        width: 68px;
                        height: 68px;
                        margin-bottom: 20px;
                    }
                    
                    div {
                        font-size: 20px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #000000;
                    }
                }
            }
            
        }
        
        .box_names {
            width: calc(280px - 42px);
            background: #FFFFFF;
            border: 1px solid #000000;
            padding: 18px 21px;
            
            .box_items_inof {
                display: flex;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
                margin-bottom: 13px;
                
                .title {
                    width: 70px;
                    text-align: right;
                }
                
                .contents {
                    width: calc(100% - 70px);
                    text-align: left;
                }
            }
        }
        
        .city_location_box {
            position: fixed;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.21);
            left: 0;
            bottom: 0;
            z-index: 8;
            
            .location_box {
                width: 480px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                border: 1px solid #9D9D9D;
                padding: 32px 0 30px;
                z-index: 10;
                background: #FFFFFF;
                
                .tips_title {
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                    margin-bottom: 17px;
                    text-align: center;
                }
                
                .line {
                    width: 477px;
                    height: 2px;
                    background: #E9E9E9;
                    box-sizing: border-box;
                    margin-bottom: 37px;
                }
                
                .tips_btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    
                    div {
                        width: 69px;
                        height: 30px;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        line-height: 30px;
                        cursor: pointer;
                        text-align: center;
                    }
                    
                    div:nth-child(1) {
                        border: 1px solid #C7C7C7;
                        color: #9D9D9D;
                        box-sizing: border-box;
                        margin-right: 10px;
                    }
                    
                    div:nth-child(2) {
                        color: #FFFFFF;
                        background: #B11E24;
                    }
                }
                
                .close {
                    width: 18px;
                    height: 18px;
                    position: absolute;
                    z-index: 7;
                    right: 10px;
                    cursor: pointer;
                    top: 10px;
                }
                
                .content_box_infos_tabcar {
                    width: 301px;
                    margin: 0 auto 30px;
                    
                    .tab_infos_input {
                        margin-bottom: 20px;
                        display: flex;
                        align-items: center;
                        
                        .titles {
                            text-align: right;
                            width: 80px;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #000000;
                        }
                        
                        input {
                            width: 220px;
                            height: 30px;
                            background: #FFFFFF;
                            padding: 0 12px;
                            border: 1px solid #C7C7C7;
                            box-sizing: border-box;
                            font-size: 12px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #C7C7C7;
                        }
                        
                        textarea {
                            width: 220px;
                            height: 49px;
                            padding: 7px 11px;
                            background: #FFFFFF;
                            border: 1px solid #C7C7C7;
                            box-sizing: border-box;
                            font-size: 12px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #C7C7C7;
                            resize: none;
                        }
                        
                        .btns {
                            width: 68px;
                            height: 30px;
                            background: #B11E24;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            line-height: 30px;
                            color: #FFFFFF;
                            text-align: center;
                        }
                    }
                    
                    .Tab_cars {
                        padding: 17px 20px;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #000000;
                        background: #F7F7F7;
                        
                        .top {
                            display: flex;
                            margin-bottom: 10px;
                        }
                    }
                }
                
                .address_tabs {
                    width: 323px;
                    
                    .tab_infos_input {
                        .titles {
                            width: 100px;
                        }
                    }
                }
            }
        }
        
        .content_box_infos_tabcar_hove {
            width: 342px;
            //margin: 0 auto 23px;
            margin: 0 0 23px;
            
            .tab_infos_input {
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                
                .titles {
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                }
                
                input {
                    width: 165px;
                    height: 30px;
                    background: #FFFFFF;
                    padding: 0 12px;
                    border: 1px solid #C7C7C7;
                    font-size: 12px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #C7C7C7;
                }
                
                .btns {
                    width: 68px;
                    height: 30px;
                    background: #B11E24;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 30px;
                    color: #FFFFFF;
                    text-align: center;
                }
            }
            
            .Tab_cars {
                padding: 17px 20px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
                background: #F7F7F7;
                
                .top {
                    display: flex;
                    margin-bottom: 10px;
                }
            }
        }
    }
    
    /deep/ .el-input__icon {
        line-height: 30px;
    }
    
    /deep/ .el-input--suffix {
        width: 105px;
    }
    
    /deep/ .el-select .el-input__inner {
        height: 30px;
    }
    
    /deep/ .el-select .el-input .el-input__inner {
        border-color: #C7C7C7 !important;
    }
</style>
